// 引入vue和router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入vuex的store模块
import store from '../store/index'
Vue.use(VueRouter)
// 设置路由规则
// 这里把除login和404之外的其他组件都设置为layout的子路由
// 将使用的模块全部替换为懒加载路由并使用webpack的魔法注释功能设置打包后的文件名前缀
const routes = [{
  // 登陆模块，单独为一个页面
  path: '/login',
  name: 'login',
  component: () => import(/* webpackChunkName:'login' */ '@/views/login/index')
}, {
  // 设置/和其子路由都需要校验
  meta: { requiresAuth: true },
  path: '/',
  component: () => import(/* webpackChunkName:'layout' */ '@/views/layout/index'),
  // 给布局容器添加子路由，其他子路由要全部都在布局容器下显示
  children: [{
    // homepath直接设置为空，这样/就也会显示home的内容，把hone作为登陆后的首页内容
    path: '',
    name: 'home',
    component: () => import(/* webpackChunkName:'home' */ '@/views/home/index')
  }, {
    path: '/role',
    component: () => import(/* webpackChunkName:'role' */ '@/views/role/index')
  }, {
    path: '/menu',
    name: 'menu',
    component: () => import(/* webpackChunkName:'menu' */ '@/views/menu/index')
  }, {
    path: '/resources',
    name: 'resources',
    component: () => import(/* webpackChunkName:'resources' */ '@/views/resources/index')
  }, {
    path: '/course',
    name: 'course',
    component: () => import(/* webpackChunkName:'coures' */ '@/views/course/index')
  }, {
    // 添加课程
    path: '/addCourse',
    name: 'addCourse',
    component: () => import(/* webpackChunkName:'addCourse' */ '@/views/course/add')
  }, {
    // 编辑课程
    path: '/editCourse/:courseId',
    name: 'editCourse',
    component: () => import(/* webpackChunkName:'editCourse' */ '@/views/course/edit'),
    props: true
  }, {
    // 课程内容管理
    path: '/contentManagement/:courseId',
    name: 'contentManagement',
    component: () => import(/* webpackChunkName:'contentManagement' */ '@/views/course/contentManagement'),
    props: true
  }, {
    // 上传课时视频
    path: '/uploadVideo/:courseId',
    name: 'uploadVideo',
    component: () => import(/* webpackChunkName:'uploadVideo' */ '@/views/course/uploadVideo'),
    props: true
  }, {
    path: '/user',
    name: 'user',
    component: () => import(/* webpackChunkName:'user' */ '@/views/user/index')
  }, {
    path: '/Advertising',
    name: 'Advertising',
    component: () => import(/* webpackChunkName:'Advertising' */ '@/views/Advertising/index')
  }, {
    path: '/AdvertisingSpace',
    name: 'AdvertisingSpace',
    component: () => import(/* webpackChunkName:'AdvertisingSpace' */ '@/views/Advertising-space/index')
  }, {
    // 添加菜单
    path: '/addMenu',
    name: 'addMenu',
    component: () => import(/* webpackChunkName:'addMenu' */ '@/views/menu/addMenu')
  }, {
    // 编辑菜单 - 动态路由
    path: '/editMenu/:id',
    name: 'editMenu',
    component: () => import(/* webpackChunkName:'editMenu' */ '@/views/menu/editMenu')
  }, {
    // 编辑菜单 - 动态路由
    path: '/addResources',
    name: 'addResources',
    component: () => import(/* webpackChunkName:'addResources' */ '@/views/resources/addResources')
  }, {
    // 分配菜单
    name: 'AssignmentMenu',
    path: '/role/AssignmentMenu/:id',
    component: () => import(/* webpackChunkName:'role' */ '@/views/role/assignmentMenu'),
    props: true
  }, {
    // 404模块，单独为一个页面
    path: '*',
    name: '404',
    component: () => import(/* webpackChunkName:'404' */ '@/views/404/index')
  }]
}]
// 创建vuetouter实例
const router = new VueRouter({
  routes
})

// 导航守卫
router.beforeEach((to, from, next) => {
  // 判断要跳转的路由是否需要校验，如果不需要校验直接跳转
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 如果需要校验，判断vuex的user是都为空
    if (!store.state.user) {
      // 如果为空代表没有登陆，就要跳转到登陆界面
      next({
        name: 'login',
        // 传递参数
        query: {
          // 把访问失败的路由地址存起来
          go: to.fullPath
        }
      })
    } else {
      // 不为空则代表已经登陆了，直接跳转就可以了
      next()
    }
  } else {
    next()
  }
})

// 导出实例
export default router
